<template>
    <div>
        <navtitle title="首页" />
        <van-search v-model="value" show-action label="地址" placeholder="请输入搜索关键词" @search="onSearch">
            <template #action>
                <div @click="onClickButton">搜索</div>
            </template>
        </van-search>
        <van-tabs v-model:active="active" animated>
            <van-tab title="推荐">
                <swiper imgwidth="100%" imgheight="150px" :images="images" />
            </van-tab>
            <van-tab title="美食">内容 2</van-tab>
            <van-tab title="运动">内容 3</van-tab>
            <van-tab title="保健品">内容 4</van-tab>
        </van-tabs>
        <van-tabs v-model:active="active" animated>
            <van-tab title="全球采购">
                <swiper imgwidth="100%" imgheight="150px" :images="imagesList" />
            </van-tab>
            <van-tab title="正品保障">内容 2</van-tab>
            <van-tab title="售后无忧">内容 3</van-tab>
            <van-tab title="假一赔十">内容 4</van-tab>
        </van-tabs>
        <div>
            <img src="../../../img/image.png" alt="">
        </div>
    </div>
</template>

<script setup>
import navtitle from '@/components/navtitle.vue';
import swiper from '@/components/swiper.vue';
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-5.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-6.jpeg',
];
const imagesList = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-7.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-8.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
];
</script>

<style lang="scss" scoped>
div{
    img{
        width: 100%;
        
    }
}
</style>